<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <div class="main-box">
      <div class="header-box">
        <div class="top-card">
          <div class="title fs-32">2019周洁琼 霍尊《醉赤壁＋日不落醉赤壁》</div>
          <div class="main">
            <div class="time">
              <img :src="time" alt />
              <span class="time-t fs-32">2019.04.26-2019.04.28</span>
            </div>
            <div class="address">
              <img :src="address" alt />
              <span class="address-a fs-32">上海丨虹口足球场</span>
            </div>
            <div class="ticket">
              <img :src="ticket" alt />
              <span class="ticket-t fs-32">2张票</span>
            </div>
          </div>
          <div class="circle-l"></div>
          <div class="circle-r"></div>
        </div>
      </div>
      <!-- 取票方式 -->
      <div class="ticket-way">
        <div class="title fs-32">取票方式</div>
        <div class="mains">
          <div class="btns">
            <div
              class="btn fs-32"
              :class="{active:expressIndex == 1}"
              @click="expressIndex = 1"
            >快递配送</div>
            <div class="btn fs-32" :class="{active:expressIndex == 2}" @click="expressIndex = 2">电子票</div>
          </div>
          <div class="tips">
            <img :src="question" alt />
            <span class="fs-28">
              正式开票后讲根据用户付款的先后顺序依次配票，如
              最终未能配票，我们承诺全额退款，敬请谅解。
            </span>
          </div>
        </div>
      </div>

      <!-- 填写地址 -->
      <div class="address-box">
        <div class="title" @click="editAddress">
          <input type="text" placeholder="请填写收货地址" />
          <img :src="more" alt />
        </div>
        <!-- <div class="desc fs-32">
        <input type="text">
        </div>-->
      </div>

      <!-- 选择优惠券 -->
      <div class="coupon" @click="chooseTicket">
        <input type="text" placeholder="请选择优惠券(8):" />
        <div class="right">
          <img :src="more" alt />
          <input type="text" />
        </div>
      </div>

      <!-- 价格列表展示 -->
      <div class="list">
        <div class="items">
          <div class="left fs-32">商品合计：</div>
          <div class="right fs-32">¥499</div>
        </div>
        <div class="items">
          <div class="left fs-32">优惠券：</div>
          <div class="right fs-32">-¥30</div>
        </div>
        <div class="items">
          <div class="left fs-32">总计：</div>
          <div class="right fs-32 total">￥{{totalPrice}}</div>
        </div>
      </div>

      <!-- 确认信息 -->
      <div class="confirm-mes fs-28">请仔细核对订单信息，因演出票品的唯一真实性，票品不支持退票或更换。</div>
    </div>

    <!-- 底部信息 -->
    <div class="bottom">
      <div class="left">
        <span class="text fs-32">实付金额：</span>
        <span class="price fs-32">￥{{totalPrice}}</span>
      </div>
      <div class="btn fs-32" @click="open">去支付</div>
    </div>
    <div class="pay logout" @touchmove.prevent v-if="wantpay">
      <div class="contents bg-f padding-24">
        <div class="close">
          <img :src="close" alt @click="toclose" />
        </div>
        <div class="top space-between">
          <p class="fs-36">需支付</p>
          <p class="color-r">
            &yen;
            <span>{{totalPrice}}</span>
          </p>
        </div>
        <p class="title color-9 fs-32">选择支付方式</p>
        <div class="pay-type">
          <div class="item space-between">
            <div class="left center-col">
              <img :src="alipay" alt />
              <p class="fs-32">支付宝支付</p>
            </div>
            <div class="right center" @click="apay">
              <img v-if="isAlipay" :src="checked" alt />
              <img v-else :src="check" alt />
            </div>
          </div>
          <div class="item space-between">
            <div class="left center-col">
              <img :src="wxpay" alt />
              <p class="fs-32">微信支付</p>
            </div>
            <div class="right center" @click="wpay">
              <img v-if="isWx" :src="checked" alt />
              <img v-else :src="check" alt />
            </div>
          </div>
        </div>
        <div class="pay-btn bg-p color-f fs-32 center">立即支付</div>
      </div>
    </div>
    <!-- 选择优惠券的模态框 -->
    <div class="choose_ticket" v-show="isShowTicket">
      <div class="ticket-box">
        <div class="title fs-32">
          优惠
          <img :src="close" alt @click="closeModel"/>
        </div>
        <div class="list">
          <div class="items">
            <div class="left">
              <div class="list-top">
                <span class="price">20元</span>
                <span class="name fs-28">商品优惠券</span>
              </div>
              <div class="list-bottom fs-28">2019-02-23前有效</div>
            </div>
            <div class="right">
              <span class="receive fs-32">立即领取</span>
              <!-- <span class="received">已领取</span> -->
            </div>
            <div class="line"></div>
            <div class="circle-l"></div>
            <div class="circle-r"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "confirm-order",
  data() {
    return {
      title: "订单确认",
      isBack: true,
      totalPrice: 469,
      time: require("@/assets/index/time-order.png"),
      address: require("@/assets/index/address.png"),
      wxpay: require("@/assets/index/wx-order.png"),
      alipay: require("@/assets/index/alipay.png"),
      close: require("../../assets/account/del.png"),
      check: require("@/assets/index/check-order.png"),
      checked: require("@/assets/index/checked-order.png"),
      question: require("@/assets/index/question-order.png"),
      ticket: require("@/assets/index/ticket-order.png"),
      more: require("@/assets/index/back-pic.png"),
      expressIndex: null, //取票方式
      wantpay: false,
      isWx: false,
      isAlipay: false,
      isShowTicket: false
    };
  },
  components: {},
  methods: {
    // 选择优惠券
    chooseTicket(){
      this.isShowTicket = true;
    },
    // 关闭优惠券模态框
    closeModel(){
      this.isShowTicket = false;
    },
    // 关闭模态框
    toclose() {
      this.wantpay = false;
    },
    apay() {
      this.isAlipay = !this.isAlipay;
      if (this.isAlipay) {
        this.isWx = false;
      }
    },
    wpay() {
      this.isWx = !this.isWx;
      if (this.isWx) {
        this.isAlipay = false;
      }
    },
    // 打开支付模态框
    open() {
      this.wantpay = true;
    },
    // 去填写收货地址
    editAddress() {
      this.$router.push({
        path: "/index/edit-address"
      });
    }
  },
  created() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100%;
  padding-bottom: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .main-box {
    flex-grow: 8;
    .header-box {
      position: relative;
      width: 100%;
      height: 3.44rem;
      margin-bottom: 1.88rem;
      background: linear-gradient(to right, #680dae, #9529c6);
      .top-card {
        width: 7.02rem;
        height: 4.02rem;
        background-color: #fff;
        position: absolute;
        left: 0.24rem;
        bottom: -1.64rem;
        .title {
          width: 100%;
          height: 1.39rem;
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          padding: 0.5rem 0.33rem 0.4rem 0.33rem;
          box-sizing: border-box;
          border-bottom: 0.015rem dashed #dddddd;
        }
        .main {
          padding: 0.4rem 0 0 0.34rem;
          box-sizing: border-box;
          .time {
            display: flex;
            align-items: center;
            img {
              width: 0.34rem;
              height: 0.34rem;
            }
            .time-t {
              margin-left: 0.2rem;
              font-weight: 500;
              color: rgba(244, 67, 73, 1);
            }
          }
          .address {
            margin-top: 0.4rem;
            display: flex;
            align-items: center;
            img {
              width: 0.34rem;
              height: 0.44rem;
            }
            .address-a {
              margin-left: 0.2rem;
              font-weight: 500;
              color: rgba(68, 68, 68, 1);
            }
          }

          .ticket {
            margin-top: 0.4rem;
            display: flex;
            align-items: center;
            img {
              width: 0.35rem;
              height: 0.35rem;
            }
            .ticket-t {
              margin-left: 0.2rem;
              font-weight: 500;
              color: rgba(68, 68, 68, 1);
            }
          }
        }

        .circle-l,
        .circle-r {
          position: absolute;
          width: 0.27rem;
          height: 0.27rem;
          border-radius: 50%;
          background: #680dae;
        }
        .circle-l {
          left: -0.13rem;
          top: 1.26rem;
        }
        .circle-r {
          right: -0.13rem;
          top: 1.26rem;
          background: #9529c6;
        }
      }
    }

    // 取票方式
    .ticket-way {
      background-color: #fff;
      .title {
        height: 0.9rem;
        padding: 0 0.23rem;
        box-sizing: border-box;
        line-height: 0.9rem;
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        border-bottom: 0.015rem solid #e9e9e9;
      }
      .mains {
        padding: 0.24rem 0.24rem 0.46rem;
        box-sizing: border-box;
        border-bottom: 0.015rem solid #e9e9e9;
        .btns {
          display: flex;
          align-items: center;
          margin-top: 0.24rem;
          margin-bottom: 0.45rem;
          .btn {
            width: 1.94rem;
            height: 0.78rem;
            line-height: 0.8rem;
            font-weight: bold;
            border: 0.015rem solid #999999;
            border-radius: 0.1rem;
            color: rgba(68, 68, 68, 1);
            text-align: center;
          }
          .btn:first-child {
            margin-right: 0.22rem;
          }
          .active {
            color: #ffffff;
            background: #f85859;
            border: 0.015rem solid #f85859;
          }
        }
        .tips {
          display: flex;
          position: relative;
          img {
            left: 0;
            top: 0.05rem;
            position: absolute;
            width: 0.3rem;
            height: 0.3rem;
          }
          span {
            text-indent: 0.5rem;
            font-weight: 500;
            line-height: 0.48rem;
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }

    // 填写地址
    .address-box {
      background-color: #fff;
      padding: 0 0.25rem;
      box-sizing: border-box;
      margin-bottom: 0.24rem;
      .title {
        height: 0.9rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          font-size: 0.32rem;
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
        input::-webkit-input-placeholder {
          font-size: 0.28rem;
          color: #999999;
        }

        img {
          width: 0.15rem;
          height: 0.26rem;
        }
      }
      .desc {
        padding: 0.33rem 0;
        box-sizing: border-box;
      }
    }

    // 选择优惠券
    .coupon {
      width: 100%;
      height: 1rem;
      display: flex;
      padding: 0 0.25rem;
      box-sizing: border-box;
      margin-bottom: 0.24rem;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      input {
        width: 2.6rem;
        font-size: 0.32rem;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
      }
      .right {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        input {
          width: 4rem;
          font-size: 0.32rem;
          font-weight: 500;
          text-align: right;
          color: rgba(68, 68, 68, 1);
        }
        input::-webkit-input-placeholder {
          font-size: 0.32rem;
          color: #444444;
        }

        img {
          margin-left: 0.2rem;
          width: 0.15rem;
          height: 0.26rem;
        }
      }
    }

    // 价格列表
    .list {
      background-color: #fff;
      margin-bottom: 0.27rem;

      .items {
        padding: 0.37rem 0.25rem 0.32rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.015rem solid #e9e9e9;
        .left,
        .right {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
        .total {
          color: #f85859;
        }
      }
    }

    // 确认提示信息
    .confirm-mes {
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      padding: 0 0.25rem;
      box-sizing: border-box;
      margin-bottom: 0.72rem;
    }
  }

  // 底部信息
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .left {
      display: flex;
      margin-left: 0.24rem;
      .text,
      .price {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
      }
      .price {
        color: #f85859;
      }
    }
    .btn {
      width: 2.6rem;
      height: 1rem;
      line-height: 1rem;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      background: rgba(84, 4, 120, 1);
      text-align: center;
    }
  }
  .pay {
    .contents {
      width: 100%;
      height: 6.6rem;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0.15rem 0.15rem 0 0;
      .close {
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        margin-top: -0.8rem;
        right: 0.24rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .top {
        height: 1.8rem;
        border-bottom: 0.01rem solid #e9e9e9;
        .color-r {
          span {
            font-size: 0.6rem;
          }
        }
      }
      .title {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        height: 1rem;
        line-height: 1rem;
      }
      .pay-type {
        .item {
          height: 1rem;
          .left {
            img {
              width: 0.44rem;
              height: 0.44rem;
              margin-right: 0.2rem;
            }
          }
          .right {
            width: 0.36rem;
            height: 0.36rem;
            img {
              width: 100%;
            }
          }
        }
      }
      .pay-btn {
        margin-top: 0.3rem;
        width: 100%;
        height: 0.9rem;
        border-radius: 0.45rem;
      }
    }
  }

  .choose_ticket {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .ticket-box {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 7rem;
      background-color: #fff;
      border-radius: 0.2rem 0.2rem 0 0;
      .title {
        width: 100%;
        padding: 0.34rem 0.24rem 0.24rem 0.24rem;
        box-sizing: border-box;
        text-align: center;
        font-weight: 500;
        line-height: 0.48rem;
        color: rgba(68, 68, 68, 1);
        border-bottom: 0.015rem solid #e9e9e9;
        img {
          position: absolute;
          right: 0.25rem;
          top: 0.4rem;
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .list {
        .items {
          position: relative;
          margin: 0 auto;
          width: 7.02rem;
          height: 1.8rem;
          padding: 0 0.4rem;
          box-sizing: border-box;
          border-radius: 0.2rem;
          display: flex;
          justify-content: space-between;
          background-color: #ffe7e0;
          .left {
            color: rgba(244, 67, 73, 1);
            margin-top: 0.3rem;
            .list-top {
              margin-bottom: 0.22rem;
              .price {
                font-size: 0.48rem;
                font-weight: bold;
                color: rgba(244, 67, 73, 1);
              }
              .name {
                font-weight: 500;
              }
            }

            .list-bottom {
              font-weight: 500;
              color: rgba(244, 67, 73, 1);
            }
          }
          .right {
            margin-top: 0.7rem;
            .receive {
              font-weight: bold;
              color: rgba(244, 67, 73, 1);
            }
            .received {
              color: #999999;
            }
          }
          .line{
            position: absolute;
            left: 4.64rem;
            top: 0;
            border-left: 0.02rem dashed #F44349;
            height: 1.8rem;

          }
          .circle-l,
          .circle-r {
            position: absolute;
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 50%;
            background-color: #fff;
          }
          .circle-l {
            left: 4.49rem;
            top: -0.15rem;
          }
          .circle-r {
            left: 4.49rem;
            bottom: -0.15rem;
          }
        }
      }
    }
  }
}
</style>
